import { t } from 'i18next'
import { CheckBox } from '@kedacom/react-next'
import { useState } from 'react'
import { CloseIcon, InfoIcon, StyledWrap } from './style'

const isNotChrome = function () {
	//不是谷歌浏览器
	if (!(window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
		return true
	}
	return false
}

export default function WebRecommendBrowser() {
	const [show, setShow] = useState(true)
	const handleCheck = (checked: boolean) => {
		if (checked) {
			handleClose()
		}
		localStorage.setItem('noNativeMonitorPowerNoticeRemind', String(checked))
	}
	const handleClose = () => {
		setShow(false)
	}
	return !!!localStorage.getItem('noNativeMonitorPowerNoticeRemind') && isNotChrome() && show ? (
		<StyledWrap id="nativeMonitorPowerNotice">
			<InfoIcon className="info-icon" />
			<span className="text">{t('当前浏览器部分功能不支持，推荐使用Chrome浏览器')}</span>
			<CheckBox className="noNativeMonitorPowerNoticeRemind" onChange={(e, val) => handleCheck(val)}>
				{t('不再提示')}
			</CheckBox>
			<CloseIcon className="close-icon" onClick={handleClose} />
		</StyledWrap>
	) : (
		<></>
	)
}
